<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片切换</title>
		<style type="text/css">
			#center {
				position: relative;
				width: 264px;
				height: 184px;
				margin: 100px auto;
			}

			#left_btn {
				position: absolute;
				top: 50%;
				margin-top: -22px;
				width: 28px;
				height: 44px;
				background: url(../images/icons.png) no-repeat -21px -94px;
			}

			#right_btn {
				position: absolute;
				top: 50%;
				right: 0;
				margin-top: -22px;
				width: 28px;
				height: 44px;
				background: url(../images/icons.png) no-repeat -21px -29px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="center">
				<img src="../images/depth-travel2.png" :src="imgArr[index]">
				<div id="left_btn" @click="prev" v-show="index!=0"></div>
				<div id="right_btn" @click="next" v-show="index<imgArr.length-1"></div>
			</div>
		</div>
		<script src=" https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el: '#box',
				data: {
					imgArr: [
						"../images/depth-travel2.png",
						"../images/depth-travel3.png",
						"../images/depth-travel4.png",
						"../images/depth-travel5.png",
						"../images/depth-travel6.png",
					],
					index: 0
				},
				methods: {
					prev: function() {
						this.index--;
					},
					next: function() {
						this.index++;
					}
				}
			})
		</script>
	</body>
</html>
